<template>
  <div class="conetnt-page">
    <div class="page-top">
      <el-button type="primary" :icon="Back" @click="backEvent">返回</el-button>
    </div>
    <div class="page-content">
      <div class="content-left">
        <el-card style="width:100%;height:100%;" :body-style="{ height:'90%',padding:'0px' }">
          <template #header><span>计划排产明细</span></template>
          <Grid></Grid>
        </el-card>
      </div>
      <div class="content-right">
        <div class="content-right-top">
          <el-card style="width:100%;height:100%;" :body-style="{ height:'93%',padding:'5px',overflow:'scroll' }">
            <template #header><span>车间排产规划</span></template>
            <el-form :model="scheduleForm" :inline="true" label-width="100px" style="width: 100%;">
              <el-form-item label="日期">
                <el-date-picker v-model="scheduleForm.planTime" type="date" disabled format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 200px"></el-date-picker>
              </el-form-item>
              <el-form-item label="生产订单">
                <el-input :value="scheduleForm.productOrder" disabled style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item label="车间">
                <el-input :value="scheduleForm.gridName" disabled></el-input>
              </el-form-item>
              <el-form-item label="物料">
                <el-input :value="scheduleForm.materialName" disabled></el-input>
              </el-form-item>
              <el-form-item label="计划排产数量">
                <el-input :value="scheduleForm.schedulingQuantity" disabled/>
              </el-form-item>
              <el-form-item label="工艺">
                <el-select v-model="scheduleForm.craftId" placeholder="请选择工艺" @change="craftChangeEvent" style="width:200px;">
                  <el-option v-for="op in scheduleForm.craftList" :label="op.craftName" :value="op.craftId" :key="op.craftId"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工序">
                <el-select v-model="scheduleForm.processIds" multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="1" placeholder="请选择工序" style="width:200px;">
                  <el-option v-for="pro in scheduleForm.processList" :label="pro.procedureName" :value="pro.procedureId" :key="pro.procedureId"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="top-table" style="height:75%;">
              <Grid2>
                <template #toolbar-actions>
                  <el-button type="danger" :icon="Plus" @click="addRowEvent">添加行数据</el-button>
                  <el-button type="warning" :icon="Check" @click="batchConfirmEvent">批量确定</el-button>
                </template>
                <template #action="{ row }">
                  <el-button link @click="gridApi2.grid.remove(row)">删除</el-button>
                  <el-button link @click="confirmEvent(row)">确定</el-button>
                </template>
              </Grid2>
            </div>
          </el-card>
        </div>
        <div class="content-right-bottom">
          <el-card style="width:100%;height:100%;" :body-style="{ height:'92%',padding:'0px',overflow:'scroll' }">
            <template #header><span>车间排产明细表</span></template>
            <Grid3>
              <template #toolbar-actions>
                <el-button type="info" :icon="Star" @click="batchSaveSchedulingEvent">批量保存</el-button>
                <el-button type="success" :icon="Share" @click="batchSaveSchedulingEvent(1)">批量保存并生效</el-button>
              </template>
              <template #action="{ row }">
                <el-button link @click="saveSchedulingEvent(row)">保存</el-button>
                <el-button link @click="saveSchedulingEvent(row,1)">保存并生效</el-button>
                <el-button link @click="delSchedulingEvent(row)">删除</el-button>
              </template>
            </Grid3>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
//@ts-ignore
import { useRouter,useRoute } from "vue-router";
import { ElMessage, ElMessageBox,ElNotification,ElInput,ElForm,ElFormItem,ElSelect,ElOption, ElDialog,ElButton,ElLoading,ElTag,ElDatePicker,ElCard} from "element-plus";
import { Plus,Back,StarFilled,Search,Edit,Check,Star,Share } from '@element-plus/icons-vue';
import { Button, Upload, RadioButton, RadioGroup } from "ant-design-vue";
import { useVbenVxeGrid } from "#/adapter/vxe-table";
import { confirm } from '@vben/common-ui';
import { nextTick, ref, onUnmounted, onMounted,reactive, unref, watch, computed } from "vue";
import { dealVxeGridFilterParameter,dayjs,getRandom,lodash,sleep } from "#/utils/tools";
import { reqProductionPlansByDetail,reqWorkmanshipListByMaterial,reqWorkOrder,reqLineList,reqLayoutMetersAndLayoutStripCount,reqSaveOrUpdateWorkshopPlan } from "#/api/productionPlan";
const router = useRouter(),route = useRoute();
//@ts-ignore
import { useOtherStore } from "#/store/index.ts";
const otherStore = useOtherStore();
const otherPageData = computed(() => otherStore.getTempStore);

//选择订单(明细)临时存储
const selectedOrders = ref(null);
//车间规划排产form
const scheduleForm = reactive({
  planTime:dayjs().format("YYYY-MM-DD"),
  productOrder:"",
  gridCode:"",
  gridName:"",
  materialName:"",
  materialCode:"",
  schedulingQuantity:"",
  processIds:[],
  processList:[],
  craftId:"",
  craftList:[],
  original:null
});
//车间规划排产选择数据
const scheduleList = ref([]);
//生产产线列表
const productLineList = ref([]);


onMounted(() => {
  getLineList();
});

watch(() => scheduleForm.materialCode, (val) => {
  if(val){
    getWorkmanshipListByMaterial(val);
  }
});


const gridOptions = ref({
  columns: [
    { title: "序号", type: "seq", width: 40,visible:true },
    { type: 'checkbox', title: '选择' },
    { 
      field:"gripName",
      title:"车间名称",
      width:"120",
      visible:true,
      filters: [""],
      filterRender: { name: "customizeFilter",type:"input" }
    },
    { 
      field:"planTime",
      title:"排产时间",
      width:"120",
      visible:true,
      filters:[{ data:"",checked:false }],
      filterRender:{ name:"customizeFilter",type:"date" }
    },
    { field:"quantity",title:"排产数量",width:"120",visible:true },
    { 
      field:"productionPlanCode",
      title: "排产编号",
      width:"150",
      visible:true,
      filters: [""],
      filterRender: { name: "customizeFilter",type:"input" }
    },
    { field:"gripCode", title:"车间编号", width:"120",visible:false },
    { field:"instructionNumber", title:"制令号", width:"180",visible:false },
    { field:"saleOrderCode", title:"销售订单号", width:"150",visible:false },
    { 
      field:"productionOrderNumber",
      title:"生产订单号",
      width:"180",
      visible:false,
      filters: [""],
      filterRender: { name: "customizeFilter",type:"input" }
    },
    { field:"orderQuantity",title:"订单数量",width:"150",visible:false },
    {
      field:"state",
      title:"状态",
      width:"120",
      formatter:({ cellValue,row,column }) => { return dealStatus(cellValue) },
      visible:false
    },
    { field:"materialName", title:"物料名称", width:"150",visible:false },
    { field:"materialCode", title:"物料编码", width:"150",visible:false },
    { field:"materialStandard", title:"物料标准", width:"180",visible:false },
    { field:"cumulativeQuantity",title:"累计数量",width:"150",visible:false },
    { field:"orderRequire",title:"订单要求",width:"150",visible:false },
    { field:"materialComp",title:"订单完成情况",width:"120",visible:false },
    { field:"businessMan", title:"业务员", width:"150",visible:false },
    { field:"remark", title:"备注", width:"120",visible:false }
  ],
  toolbarConfig: {
    visible:false,
    search: false,
    custom: true,
    refresh: true,
    zoom: true
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell'
  },
  checkboxConfig: {
    highlight: true,
    showHeader: false
  },
  filterConfig: {
    remote: true
  },
  rowConfig: {
    isCurrent: true,
    isHover: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: true,
    pageSize: 20,
    pageSizes: [10, 20, 30, 50, 100]
  },
  height: "auto",
  proxyConfig: {
    autoLoad: true,
    ajax: {
      query: async ({ page }, formValues) => getProductionPlanListDetail({ page,formValues })
    }
  }
});
const gridEvents = {
  editClosed:({ row, column }) => {},
  checkboxChange: ({ checked, row }) => {
    gridApi.grid.clearCheckboxRow();
    if(checked) gridApi.grid.setCheckboxRow(row, true);
    selectedChange(checked,row);
  },
  filterChange({ filterList }) {
    const parameter = dealVxeGridFilterParameter(filterList);
    gridFilterParameter = parameter;
    gridApi.query();
  },
}
const [Grid, gridApi] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions,gridEvents: gridEvents});

const gridOptions2 = ref({
  columns: [
    { type:'checkbox',title:'全选',width:70 },
    { title: "序号", type: "seq", width:50 },
    { 
      field:"lineId",
      title:"产线",
      width:"",
      editRender: { 
        name:"ElSelect",
        options: [],
        change:({row,column,changeValue}) => getLayoutMetersAndLayoutStripCount(row,changeValue),
        autofocus: true
      },
      formatter:({ row,cellValue,column }) => {
        const list = unref(productLineList);
        return list.find(item => item.lineId == cellValue)?.lineName;
      }
    },
    { 
      field:"scheduleNum",
      title:"排产数量",
      width:"",
      editRender: { 
        name:"ElInputNumber",
        props:{ min:0,precision:0 },
        autofocus: true
      }
    },
    { 
      field:"planSchedulingStartTime",
      title:"开始时间",
      width:"",
      editRender: { 
        name:"ElDatePicker",
        props:{ type:"datetime",placeholder:"选择计划排产开始时间",format:"YYYY-MM-DD HH:mm:ss",valueFormat:"YYYY-MM-DD HH:mm:ss" },
        autofocus: true
      }
    },
    { 
      field:"layoutMeters",
      title:"拼版米数",
      width:"",
      editRender: { 
        name:"ElInputNumber",
        props:{ min:0,precision:2 }
      }
    },
    { 
      field:"layoutStripCount",
      title:"拼板条数",
      width:"",
      editRender: { 
        name:"ElInputNumber",
        props:{ min:0,precision:0 }
      }
    },
    { 
      field:"",
      title:"操作",
      width:"130",
      slots:{ default:"action" }
    }
  ],
  toolbarConfig: {
    zoom: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: false
  },
  checkboxConfig: {
    highlight: true
  },
  height: "100%",
  autoResize:true,
  editRules: {
    lineId: [
      { required: true, message: '请选择产线', trigger: 'change' }
    ],
    scheduleNum: [
      { required: true, message: '请输入排产数量', trigger: 'change' }
    ],
    planSchedulingStartTime: [
      { required: true, message: '请选择计划排产日期时间', trigger: 'change' }
    ],
    layoutMeters: [
      { required: true, message: '请输入拼版米数', trigger: 'change' }
    ],
    layoutStripCount:[
      { required: true, message: '请输入拼版条数', trigger: 'change' }
    ]
  },
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    autoClear:false,
    showStatus: true
  },
  data:[]
});
const [Grid2, gridApi2] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions2,gridEvents:null});


const gridOptions3 = ref({
  columns: [
    { type: 'checkbox', width: 60 },
    { title: "序号", type: "seq", width: 50 },
    { field:"workOrderCode", title:"生产工单", width:"150" },
    { field:"saleOrderCode", title:"销售订单号", width:"150" },
    { field:"productOrder", title:"生产订单号", width:"150" },
    { field:"gridName", title:"排产车间", width:"150" },
    { field:"schedulingDate", title:"排产日期", width:"150" },
    { field:"planSchedulingStartTime", title:"排产开始时间", width:"150" },
    { field:"materialName", title:"物料名称", width:"150" },
    { field:"materialCode", title:"物料编码", width:"150" },
    { field:"schedulingQuantity", title:"计划数量", width:"150" },
    { field:"scheduleNum", title:"排产数量", width:"150" },
    { field:"craftName", title:"工艺", width:"150" },
    { field:"processNames", title:"工序", width:"150" },
    { field:"lineName", title:"产线", width:"150" },
    { field:"layoutMeters", title:"拼版米数", width:"150" },
    { field:"layoutStripCount", title:"拼版条数", width:"150" },
    { 
      field:"remark",
      title:"备注",
      width:"120",
      editRender:{ name:"ElInput" }
    },
    {
      title:"操作",
      fixed:"right",
      slots:{ default:"action" },
      width:200
    }
  ],
  toolbarConfig: {
    search: false,
    custom: false,
    export: false,
    refresh: false,
    zoom: true
  },
  filterConfig: {
    remote: true
  },
  keepSource: true,
  pagerConfig: {
    enabled: false,
    pageSize: 10,
    pageSizes: [10, 20, 30, 50, 100]
  },
  height: "100%",
  autoResize:true,
  editConfig: {
    trigger: 'click',
    mode: 'cell',
    showStatus: true,
    autoClear: false
  },
  checkboxConfig: {
    highlight: true
  },
  data:scheduleList.value
});
const gridEvents3 = {
  checkboxChange: ({ checked,row,rowIndex }) => checkboxChangeEvent({ checked,row,rowIndex })
}
const [Grid3, gridApi3] = useVbenVxeGrid({formOptions: null,gridOptions: gridOptions3,gridEvents: gridEvents3});


const backEvent = () => {
  router.back();
}

const checkboxChangeEvent = (option) => {
  const { checked,row,rowIndex } = option;
  console.log("车间明细表勾选===>",option);
}

let gridFilterParameter = null;
const getProductionPlanListDetail = async (option:any) => {
  try {
    const { page,formValues } = option;
    const params = {
      page: page.currentPage,
      size: page.pageSize
    };
    if(gridFilterParameter) Object.assign(params,gridFilterParameter);
    const response = await reqProductionPlansByDetail(params);
    return {
      total: response.data.totalElements,
      items: response.data.content
    };
  } catch (error) {
    ElNotification({title:'请求失败',message:'获取计划排产明细列表失败',type:'error'});
    return { total: 0, items: [] };
  }
};

const selectedChange = (checked:boolean,row:any) => {
  const { planTime,productionOrderNumber,gripName,gripCode,materialName,materialCode,quantity } = row;
  selectedOrders.value = null;
  checked ? selectedOrders.value = row : selectedOrders.value = null;
  if(checked){
    scheduleForm.planTime = planTime;
    scheduleForm.productOrder = productionOrderNumber;
    scheduleForm.gridName = gripName;
    scheduleForm.gridCode = gripCode;
    scheduleForm.materialName = materialName;
    scheduleForm.materialCode = materialCode;
    scheduleForm.schedulingQuantity = quantity;
    scheduleForm.original = row;
  } else {
    scheduleForm.planTime = '';
    scheduleForm.productOrder = '';
    scheduleForm.gridName = '';
    scheduleForm.gridCode = '';
    scheduleForm.materialName = '';
    scheduleForm.materialCode = '';
    scheduleForm.schedulingQuantity = '';
    scheduleForm.original = null;
    scheduleForm.craftList = [];
    scheduleForm.craftId = "";
    scheduleForm.processList = [];
    scheduleForm.processIds = [];
    //置空grid2列表数据
    gridApi2.grid.loadData([]);
  }
  console.log('====>勾选的行数据',row);
}


const getWorkmanshipListByMaterial = (code) => {
  const parameter = { materialCode:code };
  scheduleForm.craftList = [];
  scheduleForm.processList = [];
  scheduleForm.craftId = "";
  scheduleForm.processIds = [];
  reqWorkmanshipListByMaterial(parameter).then(response => {
    const list = response.data;
    const craftMap = new Map();
    list.forEach(item => {
      if(!craftMap.has(item.craftId)){
        const processList = list.filter(val => val.craftId == item.craftId).map(v => {
          return {
            sequence:v.sequence,
            procedureId:v.procedureId,
            procedureName:v.procedureName,
            supProcedureName:v.supProcedureName,
            isLastProcedure:v.isLastProcedure
          }
        })
        craftMap.set(item.craftId,{ craftId:item.craftId,craftName:item.name,processList});
      }
    })
    scheduleForm.craftList = Array.from(craftMap.values());
    scheduleForm.craftId = scheduleForm.craftList.length ? scheduleForm.craftList[0].craftId : '';
    scheduleForm.processIds = scheduleForm.craftList.length ? scheduleForm.craftList[0].processList.map(v => v.procedureId) : [];
    scheduleForm.processList = scheduleForm.craftList.length ? scheduleForm.craftList[0].processList : [];
    console.log('通过物料获取工艺列表',response);
  },error => {
    console.log('通过物料获取工艺列表',error);
  })
}

const craftChangeEvent = (craftId) => {
  scheduleForm.processList = [];
  const craft = scheduleForm.craftList.find(val => val.craftId == craftId);
  if(craft) scheduleForm.processList = craft.processList;
}

const addRowEvent = async () => {
  const { gridName,materialName,craftId,processIds,schedulingQuantity,planTime } = scheduleForm;
  if(!(gridName && materialName)){
    return ElNotification({title:'提示',message:'请先在左侧排产明细表中勾选一条数据',type:'warning'});
  }
  if(!(craftId && processIds)){
    return ElNotification({title:'提示',message:'请先在上方选择好工艺和工序',type:'warning'});
  }
  const obj = {
    randomId:getRandom(),
    lineId:unref(productLineList).length ? unref(productLineList)[0].lineId : '',
    scheduleNum:parseInt(schedulingQuantity),
    classes:'',
    layoutMeters:0,
    layoutStripCount:0,
    planSchedulingStartTime:dayjs(planTime).format('YYYY-MM-DD HH:mm:ss'),
    scheduleForm:lodash.cloneDeep(scheduleForm)
  };
  await sleep(500);
  const { row,rows } = await gridApi2.grid.insert(obj);
  getLayoutMetersAndLayoutStripCount(row,row.lineId);
}


const batchConfirmEvent = async () => {
  await sleep(500);
  const selected = gridApi2.grid.getCheckboxRecords(true);
  if(!selected.length) return ElNotification({title:'提示',message:'未勾选行数据',type:'warning'});
  const errMaps = await gridApi2.grid.validate(selected);
  if (!errMaps) {
    selected.forEach(async row => {
      const rowData = await dealInsertRowOfWorkshopSchedule(row);
      scheduleList.value.push(rowData);
    });
    gridApi2.grid.remove(selected);
    gridApi2.grid.clearCheckboxRow();
  } else {
    ElNotification({title:'提示',message:'存在行数据未填写完整',type:'warning'});
  }
}
const confirmEvent = async(row:any) => {
  await sleep(500);
  gridApi2.grid.validate(row).then(async (errMap) => {
    if (!errMap) {
      const rowData = await dealInsertRowOfWorkshopSchedule(row);
      scheduleList.value.push(rowData);
      gridApi2.grid.remove(row);
    } else {
      ElNotification({title:'提示',message:'当前行数据未填写完整',type:'warning'});
    }
    console.log('明细表===>',scheduleList);
  });
}

const dealInsertRowOfWorkshopSchedule = async (row:any) => {
  const { randomId,lineId,scheduleNum,layoutMeters,layoutStripCount,scheduleForm,planSchedulingStartTime } = row;
  const { planTime,productOrder,gridName,gridCode,materialName,materialCode,schedulingQuantity,processIds,processList,craftId,craftList,original } = scheduleForm;
  const { saleOrderCode,gripId,instructionNumber,materialNumberId,planDetailId } = original;
  const workOrderCode = await getWorkOrderCode();
  const craftInfo = craftList.find(item => item.craftId == craftId)||{};
  const lineInfo = unref(productLineList).find(item => item.lineId == lineId) || {};
  const [selectedProcessNames,selectedProcessList] = dealProcess({processIds,processList});
  const insertRow = {
    randomId:getRandom(),
    workOrderCode,
    saleOrderCode,
    productOrder,
    gridName,
    gridCode,
    gridId:gripId,
    schedulingDate:planTime,
    materialName,
    materialCode,
    schedulingQuantity,
    scheduleNum,
    craftName:craftInfo.craftName,
    craftId:craftInfo.craftId,
    processNames:selectedProcessNames,
    selectedProcessList,
    lineId,
    lineName:lineInfo.lineName,
    lineCode:lineInfo.lineCode,
    workCenterId:lineInfo.workCenterId,
    workCenterName:lineInfo.workCenterName,
    layoutMeters,
    layoutStripCount,
    instructionNumber:instructionNumber,
    planSchedulingStartTime,
    materialNumberId,
    planDetailId,
    remark:""
  };
  return insertRow;
}


const batchSaveSchedulingEvent = (type = 0) => {
  const selected = gridApi3.grid.getCheckboxRecords(true);
  if(!selected.length) return ElNotification({title:'提示',message:'未勾选行数据',type:'warning'});
  confirm({content: '确定保存当前勾选的行数据吗?',icon: 'success'}).then(async() => {
    const isSave = await saveOrUpdateScheduling(selected,type);
    if(isSave){
      gridApi3.grid.remove(selected);
      gridApi3.grid.clearCheckboxRow();
    }
  });
}
const saveSchedulingEvent = async (row:any,type = 0) => {
  confirm({content: '确定保存当前行数据吗?',icon: 'success'}).then(async() => {
    const isSave = await saveOrUpdateScheduling([row],type);
    isSave ? gridApi3.grid.remove(row) : null;
  });
}
const delSchedulingEvent = (row:any) => {
  gridApi3.grid.remove(row);
}

const saveOrUpdateScheduling = (rows:any,type = 0) => {
  return new Promise((resolve,reject) =>{
    const scheduleList = [];
    for(let j = 0; j < rows.length; j ++){
      const t = rows[j];
      const parameter = {
        workOrderNumber:t.workOrderCode,
        instructionNumber:t.instructionNumber,
        schedulingDate:t.schedulingDate,
        planSchedulingStartTime:t.planSchedulingStartTime,
        state:type,
        materialCode:t.materialCode,
        materialName:t.materialName,
        schedulingQuantity:t.scheduleNum,
        gripId:t.gridId,
        gripName:t.gridName,
        lineId:t.lineId,
        lineName:t.lineName,
        lineCode:t.lineCode,
        workCenterId:t.workCenterId,
        workCenter:t.workCenterName,
        layoutMeters:t.layoutMeters,
        layoutStripCount:t.layoutStripCount,
        craftId:t.craftId,
        craftName:t.craftName,
        craftCode:"",
        procedureList:t.selectedProcessList,
        materialNumberId:t.materialNumberId,
        planDetailId:t.planDetailId,
        remark:t.remark
      }
      scheduleList.push(parameter);
    }
    reqSaveOrUpdateWorkshopPlan(scheduleList).then(response => {
      if(response.code == 200){
        ElNotification({title:'提示',message:'保存成功',type:'success'});
      }
      console.log('保存或更新车间排产api',response);
      resolve(true);
    },error => {
      ElNotification({title:'提示',message:'保存失败' + error.message,type:'error'});
      console.log('保存或更新车间排产api',error);
      reject(false);
    })
  })
}

const getLineList = () => {
  reqLineList().then((response) => {
    const productLine = response.data.map(val => {
      return { lineId:val.productionLineId,lineName:val.name,lineCode:val.productionLineCode,workCenterId:val.workCenterId,workCenterName:val.workCenterName };
    })
    productLineList.value = productLine;
    nextTick(() => {
      gridApi2.grid.getColumnByField('lineId').editRender.options = productLine.map(val => {
        return { label: val.lineName, value: val.lineId };
      });
      gridApi2.grid.getColumnByField('lineId').formatter = ({ row,cellValue,column }) => {
        return productLine.find(item => item.lineId == cellValue)?.lineName;
      }
      gridApi2.grid.refreshColumn();
    });
  },error => {
    ElNotification({title:'错误',message:'产线列表获取失败',type:'error'});
    console.error("获取产线列表api", error);
  });
}

const getWorkOrderCode = () => {
  return new Promise((resolve, reject) => {
    reqWorkOrder().then(response => {
      resolve(response.data);
    },error => {
      reject(error);
    })
  })
}

const getLayoutMetersAndLayoutStripCount = (row,lineId) => {
  const lineName = unref(productLineList).find(v => v.lineId == lineId)?.lineName;
  const gridId = scheduleForm.original.gripId;
  row.layoutStripCount = 0;
  row.layoutMeters = 0;
  const parameter = { workshopId:gridId,productionLine:lineName };
  reqLayoutMetersAndLayoutStripCount(parameter).then(response => {
    const list = response.data.map(val => {
      return { layoutStripCount:val.layoutStripCount,layoutMeters:val.layoutMeters,totalLayoutMeters:val.totalLayoutMeters };
    })
    if(list.length){
      const { layoutStripCount, layoutMeters } = list[0];
      row.layoutStripCount = layoutStripCount || 0;
      row.layoutMeters = layoutMeters || 0;
    }
  },error => {
    ElNotification({title:'错误',message:'拼版米数和拼版条数获取失败',type:'error'});
    console.log("获取拼版米数和条数api",error);
  })
}

const dealProcess = (option:any) => {
  const { processIds,processList } = option;
  const selectedProcessList = [];
  for(let k = 0; k < processIds.length; k ++){
    const processId = processIds[k];
    const process = processList.find(val => val.procedureId == processId);
    if(!process) break;
    const { sequence,procedureName,supProcedureName,isLastProcedure } = process;
    const curProcess = { ...process };
    if(supProcedureName){
      const sup = processList.find(val => val.procedureName == supProcedureName);
      curProcess.supProcedureId = sup.procedureId;
    }
    selectedProcessList.push(curProcess);
  }
  const selectedProcessNames = selectedProcessList.map(val => val.procedureName).join('->');
  return [selectedProcessNames,selectedProcessList];
}

const dealStatus = (status:number|string = 0) => {
  status = Number(status);
  let desc = "";
  switch (status) {
    case 0:
      desc = "创建";
      break;
    case 1:
      desc = "生效";
      break;
    case 2:
      desc = "完成";
      break;
    case 3:
      desc = "关闭";
      break;
    case 4:
      desc = "取消";
      break;
    default:
      desc = "未知";
  }
  return desc;
}
</script>

<style lang="scss" scoped>
.conetnt-page{
  width: 100%;
  height:100vh;
  box-sizing: border-box;
}
.page-top{
  width: 100%;
  height:45px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.page-content{
  width: 100%;
  height:calc(100% - 45px);
  display: flex;
  box-sizing: border-box;
}
.content-left{
  width: 25%;
  margin-right: 8px;
}
.content-right{
  width: 75%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .content-right-top{
    width:100%;
    height: 50%;
    margin-bottom: 8px;
  }
  .content-right-bottom{
    width:100%;
    height: 50%;
  }
}

:deep(.el-form-item__content){
  flex-wrap: nowrap !important;
}
:deep(.el-card .el-card__header){
  padding:8px 20px !important;
}
</style>